let click = 0;
let But1 = document.querySelector("#but1");
let But2 = document.querySelector("#but2");
let But3 = document.querySelector("#but3");
let But4 = document.querySelector("#but4");
let But5 = document.querySelector("#but5");
let But6 = document.querySelector("#but6");
let But7 = document.querySelector("#but7");
let But8 = document.querySelector("#but8");
let WiFi=document.querySelector("#wifi");


let brightness = 0;
let pattern = 0;
let pace = 0;
let hue = 0;
let sel_c = 1;

//滑块调节
let LED_Brightness = "/LED-Brightness"; //地址拼接
let LED_Pace = "/LED-Pace"; //地址拼接
let LED_Pattern = "/LED-Pattern"; //地址拼接

let Hue = document.querySelector("#hue");
let Pace = document.querySelector("#pace");
let Span = document.querySelector("#span");
let Span1 = document.querySelector("#span1");
let Main = document.querySelector("#main");
let Else = document.querySelector("#else");
let Line = document.querySelector("#select-line");

let Color1 = document.getElementById("color1");
let Color2 = document.getElementById("color2");
let Color3 = document.getElementById("color3");




Main.addEventListener("click", () => {
  Line.style.left = "29%";
});
Else.addEventListener("click", () => {
  Line.style.left = "58%";
});

Color1.addEventListener("click", () => {
  init_passage();
  document.querySelector("#p1").style.color = "pink";
  sel_c = 1;
});

Color2.addEventListener("click", () => {
  init_passage();
  document.querySelector("#p2").style.color = "pink";
  sel_c = 2;
});

Color3.addEventListener("click", () => {
  init_passage();
  document.querySelector("#p3").style.color = "pink";
  sel_c = 3;
});

Hue.addEventListener("input", () => {
  hue = Hue.value;
  Span.innerHTML = "H:" + Hue.value;
  //show in console
  console.log("--hue:  " + hue + "--");

  //滑动滑块的同时滑块的颜色改变
  switch (sel_c) {
    case 1:
      Color1.style.background = "hsl(" + hue + "," + "100%" + "," + "50%)";
      if (hue == 0)
        Color1.style.background = "hsl(" + hue + "," + "100%" + "," + "0%)";
      if (hue == 360)
        Color1.style.background = "hsl(" + hue + "," + "0%" + "," + "100%)";
      break;
    case 2:
      Color2.style.background = "hsl(" + hue + "," + "100%" + "," + "50%)";
      if (hue == 0)
        Color2.style.background = "hsl(" + hue + "," + "100%" + "," + "0%)";
      if (hue == 360)
        Color2.style.background = "hsl(" + hue + "," + "0%" + "," + "100%)";
      break;
    case 3:
      Color3.style.background = "hsl(" + hue + "," + "100%" + "," + "50%)";
      if (hue == 0)
        Color3.style.background = "hsl(" + hue + "," + "100%" + "," + "0%)";
      if (hue == 360)
        Color3.style.background = "hsl(" + hue + "," + "0%" + "," + "100%)";
      break;
  }

  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Hue + "?hue=" + hue, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

But1.addEventListener("click", () => {
  init_button_position();
  //But1.style.left="45%";
  But1.style.width = "62%";
  But2.style.width = "10%";
  But3.style.width = "13%";
  But3.style.left = "85%";
  But2.style.left = "72%";
  But1.style.left = "12%";
  Line.style.left = "58%";
  pattern = 1;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

But2.addEventListener("click", () => {
  init_button_position();
  But2.style.width = "60%";
  But3.style.width = "10%";
  But1.style.width = "13%";

  But2.style.left = "28%";
  But1.style.left = "9%";
  But3.style.left = "85%";
  pattern = 2;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

But3.addEventListener("click", () => {
  init_button_position();
  But3.style.width = "60%";
  But2.style.width = "12%";
  But1.style.width = "13%";

  But3.style.left = "43%";
  But2.style.left = "25%";
  But1.style.left = "9%";
  But1.style.animationPlayState = ""; // animationPlayState 为空时继续播放
  console.log("run");
  console.log(document.querySelector(".but1"));

  pattern = 3;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

But4.addEventListener("click", () => {
  init_button_position();
  But4.style.width = "60%";
  But5.style.width = "12%";
  But6.style.width = "13%";

  But4.style.left = "12%";
  But5.style.left = "69%";
  But6.style.left = "82%";

  pattern = 4;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

But5.addEventListener("click", () => {
  init_button_position();

  But4.style.width = "12%";
  But5.style.width = "60%";
  But6.style.width = "10%";

  But4.style.left = "12%";
  But5.style.left = "31%";
  But6.style.left = "89%";

  pattern = 5;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

But6.addEventListener("click", () => {
  init_button_position();

  But4.style.width = "12%";
  But5.style.width = "12%";
  But6.style.width = "60%";

  But4.style.left = "10%";
  But5.style.left = "24%";
  But6.style.left = "43%";

  pattern = 6;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

But7.addEventListener("click", () => {
  init_button_position();

  But7.style.width = "70%";
  But8.style.width = "14%";

  But7.style.left = "12%";
  But8.style.left = "80%";

  pattern = 7;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});
But8.addEventListener("click", () => {
  init_button_position();

  But7.style.width = "14%";
  But8.style.width = "70%";

  But7.style.left = "12%";
  But8.style.left = "33%";

  pattern = 8;

  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=" + pattern, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

init_button_position = function () {
  But1.style.left = "12%";
  But2.style.left = "45%";
  But3.style.left = "69%";
  But4.style.left = "13%";
  But5.style.left = "33%";
  But6.style.left = "68%";
  But7.style.left = "11%";
  But8.style.left = "40%";

  But1.style.width = "32%";
  But2.style.width = "20%";
  But3.style.width = "20%";
  But4.style.width = "15%";
  But5.style.width = "35%";
  But6.style.width = "23%";
  But7.style.width = "24%";
  But8.style.width = "50%";
};

init_passage = function () {
  document.querySelector("#p1").style.color = "black";
  document.querySelector("#p2").style.color = "black";
  document.querySelector("#p3").style.color = "black";
};
